<script lang="ts" setup>
import {useCategoryStore} from "@/stores/category";

const categoryStore = useCategoryStore()
const goCategoryDetail = (id: number) => {
  uni.navigateTo({
    url: '/subPkg/categoryDetail/categoryDetail?id=' + id
  })
}
</script>

<template>
  <view class="category-list">
    <view v-for="(item,index) in categoryStore.categoryList" class="category-list-item"
          @tap="goCategoryDetail(item.id)">
      <uv-image :src="'/static/category/'+item.id+'.png'" height="100" mode="aspectFit" width="100"></uv-image>
      <text style="font-size: 14px">{{ item.name }}</text>
    </view>
    <view class="text-gray text-df flex justify-center" style="width: 100%">更多分类正在赶来~</view>
  </view>
</template>

<style lang="scss" scoped>
.category-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100rpx 50rpx;
  /* #ifdef H5 */
  background-color: #fff;
  /* #endif */
  row-gap: 100rpx;

  &-item {
    color: #333;
    width: 33.3%;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10rpx;
  }
}
</style>
